<template>
  <div class="site_head_content">
    <div class="head">
      <div class="logo">
        <router-link to="/index">
          <img :src="config.Logo" alt="">
        </router-link>
      </div>
      <div :class="hasLogin?'menu':'menu menu_nolog'">
        <div class="menu_item menu_langs">
          <el-dropdown @command="setLanguage">
            <div class="el-dropdown-link">
              <img src="@/assets/img/icon_yy.png" class="m_icon" alt="">
              <div class="name">{{$t('message.menu.langs')}}<i class="el-icon-arrow-down el-icon--right"></i></div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh">中文</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="menu_item" style="width:150px">
          <img src="@/assets/img/icon_zn.png" class="m_icon" alt="">
          <div><router-link to='/rxsqzn' style="color:#fff" class="name">{{$t('message.rxsqzn')}}</router-link></div>
        </div>
        <div class="menu_item" v-if="hasLogin" @click="viewMail">
          <img src="@/assets/img/icon_znx.png" class="m_icon" alt="">
          <div class="name">{{$t('message.menu.letters')}}</div>
          <el-badge :value="mailNumber" class="badge" v-if="mailNumber>0">
              <!-- <el-button size="small">回复</el-button> -->
          </el-badge>
        </div>
        <div class="menu_item" v-if="hasLogin" @click="logOut">
          <img src="@/assets/img/icon_tc.png" class="m_icon" alt="">
          <div class="name">{{$t('message.menu.logOut')}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import configSite from '@/baseconfig.js'
export default {
  name: 'siteHead',
  props: {},
  data () {
    return {
      mailNumber:0
    }
  },
  computed: {
    ...mapState(['hasLogin','userInfo']),
    config(){
      return configSite
    }
  },
  created(){
    if(this.hasLogin){
      this.getMailNumber()
    }
  },
  methods:{
    setLanguage(command){
      if(this.$i18n.locale!==command){
        this.$i18n.locale = command;
        localStorage.setItem('langs',command);
        location.reload()
      }
    },
    getMailNumber(){
      this.$api.post('/reckon/countMailbox',{}).then(res=>{
        this.mailNumber = res.data
      }).catch(e=>{})
    },
    logOut(){
      
     this.$api.post('/reckon/logOut',{}).then(res=>{
       this.$store.commit('logOut');
      this.$router.replace({name:'login'});
      }).catch(e=>{})

    },
    viewMail(){
      this.$router.push({name:'mailInbox',params:{t:1}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.site_head_content
  background-color $colorDeepPrimary
  .head
    margin 0 auto
    height 90px
    align-items center
    overflow hidden
    padding 0 0 0 30px
    display flex
    .logo
      flex-grow 1
      position relative
      justify-content center
    .menu
      width 400px
      display flex
      justify-content flex-end
      &.menu_nolog
        width 300px
        padding-right 0px
      .menu_item
        max-width: 100px;
        flex 1
        height 90px
        padding 15px 0
        text-align center
        position relative
        color $white
        cursor pointer
        box-sizing border-box
        border-right 1px solid $white
        &.menu_langs
          width 100px
          flex inherit
        &:nth-last-child(0)
          border-right 0
          
        .el-dropdown
          display block
          height 100%
          .el-dropdown-link
            color $white
            i
              right 10px
              top 16px
              position absolute
        .m_icon
          display block
          width 26px
          height 26px
          margin 6px auto
        .badge
          position absolute
          top 14px
          right 24px
</style>
